<template>
  <div class="">
    <div class="stb"></div>
    <keep-alive>
      <van-nav-bar
        :left-text="title"
        left-arrow
        @click-left="onClickLeft"
        fixed
      />
    </keep-alive>
    <van-search
      class="search"
      shape="round"
      v-model="value"
      placeholder="搜索患者姓名"
      input-align="center"
    ></van-search>
    <div class="Ungrouped_box">
      <div
        class="Ungrouped_list"
        v-for="(item, index) in Ungrouped_list"
        :key="index + '1'"
        @click="toPatientPage(item)"
      >
        <div class="Ungrouped_list_l">
          <img src="" alt="" />
        </div>
        <div class="Ungrouped_list_c">
          <div class="Ungrouped_list_c_name">{{ item.name }}</div>
          <div class="Ungrouped_list_c_tags">
            <van-tag round type="primary">{{ item.span[0].tag }}</van-tag>
            <van-tag round type="primary">{{ item.span[1].tag }}</van-tag>
            <van-tag round type="primary">{{ item.span[2].tag }}</van-tag>
          </div>
        </div>
        <div class="Ungrouped_list_r">{{ item.time }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { demo2 } from "../api/demo";
export default {
  components: {},
  data() {
    return {
      value: "",
      Ungrouped_list: [
        {
          id: "1",
          name: "李明",
          span: [{ tag: "癌症" }, { tag: "康复中" }, { tag: "乐问医学" }],
          time: "2021/05/05",
        },
      ],
      title: "",
      id: 0,
      data: { num: null },
    };
  },
  computed: {},
  watch: {
  },
  methods: {
    onClickLeft() {
      this.$router.push('/home');
    },
    //去患者页面
    toPatientPage(item) {
      // console.log(item);
      this.$router.push({ name: "patient", params: { id: item.id } });
    },
    async getList() {
      this.title = this.$route.params.name
      this.data.num = parseInt(this.$route.params.id);
      const res = await demo2(this.data);
      this.title = res.title
      this.Ungrouped_list = res.data;
      // console.log(res);
      //龙啸九天，傲视红尘  
    },
  },
  created() {
      this.getList();
  },
  mounted() {
    
  },
};
</script>
<style lang='less' scoped>
/deep/ .van-nav-bar__content {
  margin-top: 0.666667rem /* 25/37.5 */;
}

/deep/ .van-nav-bar__text {
  color: #000 !important;
  font-size: 0.426667rem /* 16/37.5 */;
}
/deep/ .van-nav-bar .van-icon {
  color: #000 !important;
}
.search {
  margin-top: 1.813333rem /* 68/37.5 */;
}

.Ungrouped_box {
  // height: 100%;
  width: 100%;
}
.Ungrouped {
  text-align: left;
  margin-left: 0.266667rem /* 10/37.5 */;
  margin-bottom: 0.266667rem /* 10/37.5 */;
  margin-top: 0.533333rem /* 20/37.5 */;
}
.Ungrouped_list {
  background-color: #fff;
  height: 1.866667rem /* 70/37.5 */;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .Ungrouped_list_l {
    width: 1.333333rem /* 50/37.5 */;
    height: 1.333333rem /* 50/37.5 */;
    background-color: #fc9d2d;
    border-radius: 0.666667rem /* 25/37.5 */;
    margin-left: 0.266667rem /* 10/37.5 */;
  }
  .Ungrouped_list_c {
    margin-left: 0.4rem /* 15/37.5 */;
    // margin-bottom: .266667rem /* 10/37.5 */;
    width: 56%;
    .Ungrouped_list_c_name {
      font-weight: 700;
      font-size: 0.426667rem /* 16/37.5 */;
      text-align: left;
      margin-bottom: 0.166667rem /* 10/37.5 */;
    }
    @tag-medium-padding:10px 10px;
    .Ungrouped_list_c_tags {
      text-align: left;
      span:first-child {
        background-color: #deebff;
        color: #296afc;
        padding: 3px 5px;
        margin-right: 0.133333rem /* 5/37.5 */;
      }
      span:nth-child(2) {
        background-color: #ffefdc;
        color: #fc9d2d;
        padding: 3px 5px;
        margin-right: 0.133333rem /* 5/37.5 */;
      }
      span:last-child {
        background-color: #ebebfd;
        color: #6163ef;
        padding: 3px 5px;
      }
    }
  }
  .Ungrouped_list_r {
    width: 1.866667rem /* 70/37.5 */;
    margin-right: 0.266667rem /* 10/37.5 */;
  }
}
</style>